import React, { useState } from 'react';
import {
  Box,
  CloseArrow,
  Container,
  Grid,
  GridItem,
  HeroPortal,
  Input,
  MainButton,
  Progress,
  SimpleAccordion,
  Text,
} from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import {
  useConfirmPortOutMutation,
  usePortOutQuery,
  useRejectPortOutMutation,
} from 'typings/graphql';
import { formatDate, isCompany } from 'utils/helpers';
import { withStaff } from 'utils/with-staff';

const NumeraflutningurFraNova = withStaff(() => {
  const router = useRouter();
  const { enqueueSnackbar } = useSnackbar();

  const [rejectPortOutReason, setRejectPortOutReason] = useState('');
  const [showRejectPortOutReasonError, setshowRejectPortOutReasonError] = useState(false);

  const [rejectPortOut] = useRejectPortOutMutation();
  const [confirmPortOut] = useConfirmPortOutMutation();

  const onPrev = () => {
    router.back();
  };
  const id = router.query.id as string;

  const { data, error } = usePortOutQuery({
    variables: {
      input: {
        id,
      },
    },
  });

  if (error || !data) {
    return <Box>Villa</Box>;
  }
  const portOut = data.portOut;
  const company = isCompany(portOut.nationalId);

  const confirm = async () => {
    try {
      await confirmPortOut({
        variables: {
          input: {
            id,
          },
        },
        refetchQueries: ['portOut'],
      });

      enqueueSnackbar('Tókst', {
        variant: 'success',
      });
      setRejectPortOutReason('');
    } catch (e) {
      enqueueSnackbar('Villa kom upp', {
        variant: 'error',
      });
      return;
    }
  };

  const reject = async () => {
    if (rejectPortOutReason.length <= 0) {
      setshowRejectPortOutReasonError(true);
      return;
    }

    try {
      await rejectPortOut({
        variables: {
          input: {
            id,
            reason: rejectPortOutReason,
          },
        },
        refetchQueries: ['portOut'],
      });

      enqueueSnackbar('Tókst', {
        variant: 'success',
      });
      setRejectPortOutReason('');
    } catch (e) {
      enqueueSnackbar('Villa kom upp', {
        variant: 'error',
      });
      return;
    }
  };

  return (
    <Wrapper header="none">
      <Container marginTop={10}>
        <HeroPortal
          color="pink"
          title="Númeraflutningur frá Nova"
          breadcrumbs={[
            {
              href: '/staff',
              text: 'Leit',
            },
            {
              href: '/staff/numeraflutningar',
              text: 'Númeraflutningar',
            },
            {
              text: 'Númeraflutningur frá Nova',
            },
          ]}
        />
        <Box display="flex" marginBottom={5}>
          <Box width="50%">
            <Grid gridTemplate={{ sm: 12 }} rowGap={{ sm: 2, lg: 3 }}>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Númeraflutningur er</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text
                  renderAs="p"
                  variant="pMediumBold"
                  textAlign="right"
                  color={portOut.isActive ? 'green' : undefined}
                >
                  {portOut.isActive ? 'Virkur' : 'Óvirkur'}
                </Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Símanúmer</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.phoneNumber}
                </Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Kennitala rétthafa</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.nationalId}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Rétthafi</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.fullName}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Skráð dags</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {formatDate(portOut.createdOn, 'd. MMM yyyy HH:mm')}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Samþykkja þann</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {formatDate(portOut.confirmOn, 'd. MMM yyyy HH:mm')}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Númer beiðni</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.requestId ?? '-'}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Fráfarandi fyrirtæki</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.donor}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Móttakandi fyrirtæki</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.receiver}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Hver á næsta skref</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portOut.responsibleCompany}
                </Text>
              </GridItem>
            </Grid>
          </Box>
          <Box width="50%">
            <Box>
              <Text>Staða númeraflutnings:</Text>
              <Progress
                length={8}
                current={portOut.portingStatusStep > 8 ? 0 : portOut.portingStatusStep}
                color="pink"
                steps={[
                  'Drög',
                  'Til afgreiðslu',
                  'Staðfest',
                  'Til afhendingar',
                  'Afhending',
                  'Afhent',
                  'Móttekið',
                  'Lokið',
                ]}
                isFull
                highestStep={8}
              />
            </Box>
            <CloseArrow dark onClick={onPrev} />
            {portOut.isActive && (
              <>
                <Box paddingBottom={2}>
                  {company && (
                    <Text variant="subtitleBold" color={'warning'}>
                      A.T.H. aðeins fyrirtækjasvið má samþykkja / hafna númeraflutningum frá Nova
                    </Text>
                  )}
                  <SimpleAccordion color="pink" title="Samþykkja númeraflutning" icon="happy">
                    <Box padding={2}>
                      <Grid rowGap={4} columnGap={4}>
                        <GridItem gridColumn={{ sm: '1/12' }}>
                          <Text>
                            Með því að samþykkja númeraflutning frá Nova er verið að staðfesta og
                            samþykkja móttöku á beiðni.
                          </Text>
                        </GridItem>
                        <GridItem gridColumn={{ sm: '1/12', md: '1/12', lg: '7/12' }}>
                          <MainButton
                            text={'Samþykkja núna'}
                            isDisabled={portOut.portingStatus != 'Til afgreiðslu'}
                            onClick={() => confirm()}
                          />
                        </GridItem>
                      </Grid>
                    </Box>
                  </SimpleAccordion>
                </Box>
                <SimpleAccordion color="pink" title="Hafna númeraflutningi" icon="happy">
                  <Box padding={2}>
                    <Grid rowGap={4} columnGap={4}>
                      <GridItem gridColumn={{ sm: '1/12' }}>
                        <Text>Settu inn ástæðu fyrir höfnun á númeraflutningi frá Nova</Text>
                        <Input
                          id="cancelPortIn"
                          label="Ástæða"
                          name="Cancel reason"
                          type="text"
                          required
                          value={rejectPortOutReason}
                          message="Sláðu inn ástæðu fyir því að verið er að hætta við númeraflutning"
                          onChange={(e) => setRejectPortOutReason(e.target.value)}
                          inputStatus={showRejectPortOutReasonError ? 'error' : undefined}
                        />
                      </GridItem>
                      <GridItem gridColumn={{ sm: '1/12', md: '1/12', lg: '7/12' }}>
                        <MainButton
                          text={'Hafna'}
                          isDisabled={rejectPortOutReason.length <= 0}
                          onClick={() => reject()}
                        />
                      </GridItem>
                    </Grid>
                  </Box>
                </SimpleAccordion>
              </>
            )}
          </Box>
        </Box>
      </Container>
    </Wrapper>
  );
});

NumeraflutningurFraNova.getInitialProps = () => {
  return {
    namespacesRequired: ['staff'],
  };
};

export default NumeraflutningurFraNova;